<template>
  <div>

    <el-dialog title="图片预览" v-model="isShowPic" size="small">
            <span>
                <img :src="video.v_pic.url">
            </span>
      <span slot="footer" class="dialog-footer">
          </span>
    </el-dialog>

    <el-form :model="video"  label-width="100px" class="demo-ruleForm">
      <el-col :span="12">
        <el-form-item label="视频标题" prop="v_title">
          <el-input v-model="video.v_title" placeholder="请输入视频标题"></el-input>
        </el-form-item>
        <el-form-item label="视频分类" prop="v_class">
          <el-select v-model="video.v_class" placeholder="请选择">
            <el-option
              v-for="item in this.$store.getters.navForVideoClass"
              :label="item.nav_text"
              :value="item.nav_id"
            >
              {{item.nav_text}}
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="视频封面" prop="v_pic">
          <el-upload
            action="http://localhost/yiiserver/web/index.php/video/upload"
            type="drag"
            :thumbnail-mode="true"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :multiple="false"
            name="Uploader[file]"
          >
            <i class="el-icon-upload"></i>
            <div class="el-dragger__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>

        <el-form-item label="标签">
          <input-tag :tags="video.v_tags"  placeholder="输入标签后回车"></input-tag>
        </el-form-item>

        <el-form-item label="视频上传">
          <div id="videoContainer" v-if="!isShowProgress">
            <el-button id="selectVideo" type="primary">选择视频<i class="el-icon-upload el-icon--right"></i></el-button>

          </div>
          <div v-if="isShowProgress">
            <el-progress :text-inside="true" :stroke-width="18" :percentage="videoProgressValue"></el-progress>
            <img :src="options.iconsrc" class="myicon" @click="pauseUpload">
          </div>
        </el-form-item>

        <el-form-item label="测试按钮">
          <el-button type="primary" @click="testBtn">测试按钮</el-button>
        </el-form-item>
      </el-col>

      <el-col :span="12"></el-col>

    </el-form>
  </div>
</template>

<style>
  .myicon{width: 40px;cursor: pointer;}
</style>

<script>
//引入组件
import InputTag from 'vue-input-tag';

export default{
  mounted(){
    var _this = this;

    this.qiniuUploader = Qiniu.uploader({
      runtimes: 'html5,flash,html4',      // 上传模式，依次退化
      browse_button: 'selectVideo',         // 上传选择的点选按钮，必需

      uptoken_url: 'http://localhost/yiiserver/web/index.php/video/uptoken',         // Ajax请求uptoken的Url，强烈建议设置（服务端提供）

      get_new_uptoken: false,             // 设置上传文件的时候是否每次都重新获取新的uptoken

      save_key: true,                  // 默认false。若在服务端生成uptoken的上传策略中指定了save_key，则开启，SDK在前端将不对key进行任何处理
      domain: 'videopro',     // bucket域名，下载资源时用到，必需
      container: 'videoContainer',             // 上传区域DOM ID，默认是browser_button的父元素
      max_file_size: '100mb',             // 最大文件体积限制
      flash_swf_url: '../plupload/Moxie.swf',  //引入flash，相对路径
      max_retries: 3,                     // 上传失败最大重试次数
      dragdrop: true,                     // 开启可拖曳上传
      drop_element: 'videoContainer',          // 拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
      chunk_size: '1mb',                  // 分块上传时，每块的体积
      auto_start: true,                   // 选择文件后自动上传，若关闭需要自己绑定事件触发上传
      init: {
        'FilesAdded': function(up, files) {
          plupload.each(files, function(file) {
            // 文件添加进队列后，处理相关的事情
          });
        },
        'BeforeUpload': function(up, file) {
          // 每个文件上传前，处理相关的事情
          _this.isShowProgress = true;
        },
        'UploadProgress': function(up, file) {
          // 每个文件上传时，处理相关的事情
          _this.videoProgressValue = file.precent;
        },
        'FileUploaded': function(up, file, info) {
          // 每个文件上传成功后，处理相关的事情
          // 其中info是文件上传成功后，服务端返回的json，形式如：
          // {
          //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
          //    "key": "gogopher.jpg"
          //  }
          // 查看简单反馈
          // var domain = up.getOption('domain');
          // var res = parseJSON(info);
          // var sourceLink = domain +"/"+ res.key; 获取上传成功后的文件的Url
        },
        'Error': function(up, err, errTip) {
          //上传出错时，处理相关的事情
        },
        'UploadComplete': function() {
          //队列文件处理完毕后，处理相关的事情
          _this.isShowProgress = false;
        },
        'Key': function(up, file) {
          // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
          // 该配置必须要在unique_names: false，save_key: false时才生效
          var key = "";
          // do something with key here
          return key
        }
      }
    });
  },

  data(){
    return {
      qiniuUploader:null, //七牛云上传对象变量
      options:{
        iconsrc:'/icons/pause.png',
        uploadpause:'/icons/pause.png',
        uploadstart:'/icons/start.png'
      },
      video:{
        v_title:'',
        v_class:2,
        v_pic:{name:'',url:'',id:0},
        v_tags:[],
      },
      isShowPic:false,
      videoProgressValue:0,
      isShowProgress:false,
    }
  },

  methods: {
    handleRemove(file, fileList) {
      //移除图片
      console.log(file, fileList);
      this.video.v_pic.url = '';
      this.video.v_pic.name = '';
    },
    handlePreview(file) {
      //预览图片
      console.log(file);
      this.isShowPic = true;
    },
    handleSuccess(file){
      //响应成功
      console.log(file);

      if(file.status ==1){
        //保存后端返回来的数据
        this.video.v_pic.url = file.url;
        this.video.v_pic.name = file.name;
        this.video.v_pic.id = file.img_id;
      }else{
        alert('上传失败,,请稍后再试');
      }
    },
    testBtn(){
      alert(this.video.v_tags);
    },

    pauseUpload(){
      if (this.options.iconsrc == this.options.uploadpause){
        //如果是暂停
        this.qiniuUploader.stop();

        this.options.iconsrc = this.options.uploadstart; //修改图片为 开始
      }else{
        this.qiniuUploader.start();

        this.options.iconsrc = this.options.uploadpause;
      }
    }
  },

  components:{
    'input-tag':InputTag, //注册组件
  }
}
</script>
